<template>
    <el-row :gutter="20">

        <el-col :span="8">
            <el-card style="text-align: center;">
                <template #header>
                    个人信息
                </template>
                <el-avatar :size="50" :src="UserInfoStore.avatar" />
                <ul class="userinfodeail">
                    <li>
                        <div class="title">用户名称:</div>
                        <div class="content">{{ UserInfoStore.name }}</div>
                    </li>
                    <li>
                        <div class="title">用户名称:</div>
                        <div class="content">xxxxxxxx</div>
                    </li>
                    <li>
                        <div class="title">用户名称:</div>
                        <div class="content">xxxxxxxx</div>
                    </li>
                </ul>
            </el-card>
        </el-col>

        <el-col :span="16">
            <el-card>
                <template #header>
                    修改页面
                </template>
                <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
                    <el-tab-pane label="基本信息" name="first">
                    </el-tab-pane>
                    <el-tab-pane label="修改密码" name="second">
                        <el-form :inline="false" :model="formInline" class="demo-form-inline" :rules="rules"
                            ref="ruleFormRef">
                            <el-form-item label="旧密码" style="max-width: 360px" prop="oldPwd">
                                <el-input v-model="formInline.oldPwd" placeholder="请输入旧密码" />
                            </el-form-item>
                            <el-form-item label="新密码" style="max-width: 360px" prop="newPwd">
                                <el-input v-model="formInline.newPwd" placeholder="请输入新密码" />
                            </el-form-item>
                            <el-form-item label="确认密码" style="max-width: 360px" prop="reNewPwd">
                                <el-input v-model="formInline.reNewPwd" placeholder="请确认新密码" />
                            </el-form-item>
                            <el-form-item>
                                <el-button @click="submitForm(ruleFormRef)">确认</el-button>
                                <el-button @click="resetForm(ruleFormRef)">重置</el-button>
                            </el-form-item>
                        </el-form>
                    </el-tab-pane>
                </el-tabs>
            </el-card>
        </el-col>

    </el-row>
</template>

<script lang="ts" setup>
import type { TabsPaneContext } from 'element-plus'
import { reactive, ref } from 'vue'
import { useUserInfoStore } from '@/stores/userInfo'
import type { FormInstance, FormRules } from 'element-plus'
import type { userEmittype } from '@/type/userInfo'
// 获取用户信息
const UserInfoStore = useUserInfoStore()
// const userInfo = ref({
//     username: String
// })
const url =
    'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg'
const srcList = [
    'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
    'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
    'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
    'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
    'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
    'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
    'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg',
]

// 修改资料的变量
const activeName = ref('first')
const handleClick = (tab: TabsPaneContext, event: Event) => {
    // console.log(tab, event)
}

// 修改密码表单变量
const ruleFormRef = ref<FormInstance>()
const formInline = reactive<userEmittype>({
    oldPwd: '',
    newPwd: '',
    reNewPwd: '',
})

const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            console.log('submit!')
        } else {
            console.log('error submit!', fields)
        }
    })
}

const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}

const rules = reactive({
    oldPwd: [
        { required: true, message: 'Please input Activity name', trigger: 'blur' },
        { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
    ],
    newPwd: [
        {
            required: true,
            message: 'Please select Activity zone',
            trigger: 'change',
        },
    ],
    reNewPwd: [
        {
            required: true,
            message: 'Please select Activity count',
            trigger: 'change',
        },
    ],
})
</script>

<script lang="ts">
export default {
    name: 'UserInfo'
}
</script>

<style lang="scss" scoped>
.userinfo {
    display: flex;
}

.userinfodeail {
    li {
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid black;
        padding-top: 20px;
    }

}
</style>
